<!DOCTYPE html>
<html>

<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>航班信息管理</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../css/add_flight2.css">
	<script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>

    <script src="../plugins/bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../plugins/select2/select2.css" />
    <link rel="stylesheet" href="../plugins/select2/select2-bootstrap.css" />
    <script src="../plugins/select2/select2.min.js" type="text/javascript"></script>
    


    <script src="../js/controller/flightManageController.js"></script>

</head>

<body class="hold-transition skin-red sidebar-mini" >
  <!-- .box-body -->
                
                    <div class="box-header with-border">
                        <h3 class="box-title">航班列表</h3>
                    </div>

                    <div class="box-body" id="flight">

                        <!-- 数据表格 -->
                        <div class="table-box">

                            <!--工具栏-->
                            <div class="pull-left">
                                <div class="form-group form-inline">
                                    <div class="btn-group">
                                        <button   type="button" class="btn btn-default" title="添加"  @click="Add" ><i class="fa fa-file-o"></i>添加</button>
                                        <button type="button" class="btn btn-default" title="删除" @click="Delete"> <i class="fa fa-trash-o"></i> 删除</button>
                                        <button type="button" class="btn btn-default" title="刷新" onclick="window.location.reload();"><i class="fa fa-refresh"></i> 刷新</button>
                                    </div>
                                </div>
                            </div>
                            <div class="box-tools pull-right">

                                <div class="has-feedback">
							                  航班查询：<input  style="width:180px;font-size:12px;height:28px;"  placeholder=" 航班号/起点/终点/机场名称">
									<button  class="btn btn-default">查询</button>
                                </div>
                            </div>
                            <!--工具栏/-->

			                  <!--数据列表-->
			                  <table id="dataList" class="table table-bordered table-striped table-hover dataTable">
			                      <thead>
			                          <tr>
			                              <th class="" style="padding-right:0px">
			                                  <input id="selall" type="checkbox" class="icheckbox_square-blue">
			                              </th> 
										  <th style="display:none;" class="sorting_asc">航班ID</th> 
									      <th class="sorting">航班号</th>
									      <th class="sorting">起点</th>
									      <th class="sorting">终点</th>									     
									      <th class="sorting">始发机场</th>													     						
					                      <th class="sorting">到达机场</th>
									      <th class="sorting">头等舱价格（元）</th>									     
									      <th class="sorting">商务舱价格（元）</th>								     
									     										     						
					                      <th class="text-center">操作</th>
			                          </tr>
			                      </thead>
			                      <tbody>
			                          <tr v-for="(item,index) in flight" >
			                              <td><input  type="checkbox"  :value="item.flightId" v-model="deleteFlight"></td>
				                          <td style="display:none;">{{item.flightId}}</td>
                                          <td>{{item.flightNumber}}</td>
				                          <td>{{item.flightStartPlace}}</td>
				                          <td>{{item.flightEndPlace}}</td>
				                          <td>{{item.flightStartAirport}}</td>
				                          <td>{{item.flightEndAirport}}</td>
				                          <td>{{item.flightHighPrice}}</td>
				                          <td>{{item.flightMiddlePrice}}</td>

		                                  <td class="text-center">                                           
		                                 	  <button  type="button" class="btn bg-olive btn-xs" data-toggle="modal" data-target="#editModal" @click=" FlDa(item.flightId)" >详情</button>
		                                 	  <button  type="button" class="btn bg-olive btn-xs" data-toggle="modal" data-target="#editModal" @click=" Edit(item.flightId)">修改</button>
		                                  </td>
			                          </tr>
									 
			                      </tbody>
			                  </table>
			                  <!--数据列表/-->                        

							 
                        </div>
                        <!-- 数据表格 /-->
                        <!-- 编辑窗口 -->
                        <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                            <div class="modal-dialog" >
                                <div class="modal-content">

                                    <div class="content">
                                        <div class="content-inner">
                                            <table width="100%" height="100%" style="border-collapse: collapse;"
                                                   border="0" cellpadding="0" cellspacing="0">
                                                <tr class="line line1">
                                                    <td colspan="3"><label>基本信息</label></td>
                                                </tr>
                                                <tr class="line line2">
                                                    <td colspan="3"></td>
                                                </tr>
                                                <tr class="line">
                                                    <td colspan="3">
                                                        <label>航班号</label>
                                                        <input  placeholder="例：C919"  v-model="detailed .flightNumber"  readonly>
                                                    </td>
                                                </tr>
                                                <tr class="line">
                                                    <td>
                                                        <label>起点</label>
                                                        <input placeholder="例：北京" v-model="detailed .flightStartPlace"  readonly>
                                                    </td>
                                                    <td>
                                                        <label>终点</label>
                                                        <input placeholder="例：成都" v-model="detailed .flightEndPlace"  readonly>
                                                    </td>
                                                    <td>
                                                        <label>始发机场</label>
                                                        <input  placeholder="例：北京机场" v-model="detailed .flightStartAirport"  readonly>
                                                    </td>
                                                </tr>
                                                <tr class="line">
                                                    <td>
                                                        <label>到达机场</label>
                                                        <input placeholder="例：成都机场" v-model="detailed .flightEndAirport"  readonly>
                                                    </td>
                                                    <td>
                                                        <label>起飞时间</label>
                                                        <input type="datetime-local"  v-model="detailed .flightStartTime"  readonly/>
                                                    </td>
                                                    <td>
                                                        <label>到达时间</label>
                                                        <input  type="datetime-local"  v-model="detailed .flightEndTime"  readonly />
                                                    </td>
                                                </tr>
                                                <tr class="line">
                                                    <td>
                                                        <label>头等舱价格</label>
                                                        <input type="number" min="1" step="0.1"  placeholder="例：2100" v-model="detailed .flightHighPrice"  readonly>
                                                    </td>
                                                    <td>
                                                        <label>头等舱座位</label>
                                                        <input type="number" min="0"  placeholder="例：200" v-model="detailed .flightHighNum"  readonly>
                                                    </td>
                                                    <td>
                                                        <label>商务舱价格</label>
                                                        <input type="number" min="1" step="0.1"  placeholder="例：2100" v-model="detailed .flightMiddlePrice"  readonly>
                                                    </td>
                                                </tr>
                                                <tr class="line">
                                                    <td>
                                                        <label>商务舱座位</label>
                                                        <input type="number" min="0"placeholder="例：200" v-model="detailed .flightMiddleNum"  readonly>
                                                    </td>

                                                </tr>
                                                <!--用于填充-->
                                                <tr class="line line2">
                                                    <td colspan="3"></td>
                                                </tr>
                                            </table>
                                        </div>
                                    </div>
                                    <div class="modal-footer" >

                                        <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                     </div>
                    <!-- /.box-body -->
                           
					    
                                

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <!-- 官网提供的 axios 在线地址 -->
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</body>
<script>
	new Vue({
		el:"#flight",
		data() {
			return {
				page: 1,
				pageSize: 5,
                detailed:[],
				flight:[],
                deleteFlight:[],


			}
		},
		created(){
			this.init()
		},
		methods:{
			//aixos 会返回一个Promise对象
			//async 和 await 基于 promise 的。
			//   使用 async 的函数将会始终返回一个 promise 对象
			//   await 关键字只能放到async 函数里面
			async init() {
				const params = {
					page: this.page,
					pageSize: this.pageSize,

				}
				console.log(params)
				await getFlight(params).then(res => {
				    console.log(res)
					if (String(res.data.code) === '1') {
						this.flight =res.data.data.records
						console.log(this.flight)
					}
				}).catch(err => {
					alert("cuowu")
				})
			},
            async FlDa(ids){
			    const idd={
			        id:ids
                }
			    console.log(idd)
                await  GetDetailed(idd).then(res=>{

                    if (String(res.data.code) === '1') {

                        this.detailed =res.data.data

                    }
                }).catch(err => {
                   alert("cuowu")

                 })
            },
            Edit(id){
			    window.location.href="/admin/add_flight.html?id="+id
            },
            Add(){
                window.location.href="/admin/add_flight.html?"
            },
            async  Delete(){

                console.log(this.deleteFlight)
                await  DeleteFlight(this.deleteFlight).then(res=>{

                    if (String(res.data.code) === '1') {
                        alert("删除成功")
                        alert("自动刷新")
                        window.location.reload();
                    }
                }).catch(err => {
                    alert("cuowu")

                })

            }

		}

	})



</script>
</html>